<template>
  <BaseLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton
        @toMainSearch="search"
        @toMainSearchReset="reset"
        :main-button="mainButton"
      />
    </template>
    <template v-slot:search-info>
      <searchMain
        size="mini"
        :label-width="labelWidth"
        ref="searchMain"
        :model="formData"
        :rules="searchRules"
        :itemList="formItemList"
      />
      <el-divider />
    </template>
    <template v-slot:table-main>
      <common-table
        :data="infoList"
        border
        :columns-item="columns"
        :title="infoTitle"
        :loading="false"
        :item-list="itemList"
        :displayColumn="displayColumn"
        @checkbox-change="selectChangeEvent"
      />
    </template>
    <template v-slot:table-member>
      <common-table
        :data="testList"
        border
        :columns-item="testColumns"
        :title="testTitle"
        @checkbox-change="selectChangeEvent"
      />
    </template>
  </BaseLayout>
  <!-- <div class="roles-container">
    
    <institution />

    
    <div class="body_right">
      
      <el-card>
        
        <el-row>
          <el-col>
            <el-button
              icon="el-icon-circle-plus-outline"
              type="primary"
              @click="handleBtn"
            >新增档案
            </el-button>
          </el-col>
        </el-row>
        
        <searchInfo />

        <el-divider />
       
        <div class="info">
          <tableInfo
            :info-data="HealthTableData"
            @removeData="handleRemove($event)"
            @editData="handleEdit($event)"
          />
          <personnelTable :personnel-data="testList" />
        </div>
      </el-card>
    </div>

   
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogType === 'edit' ? '修改档案' : '新增档案'"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      
      <el-form
        ref="addFormRef"
        :model="form"
        :rules="addFormRules"
        label-width="110px"
      >
        <el-form-item label="户主姓名:" prop="XM" class="itemWidth">
          <el-input v-model="form.XM" />
        </el-form-item>
        <el-form-item label="身份证号:" prop="ZJHM" class="itemWidth">
          <el-input v-model="form.ZJHM" />
        </el-form-item>
        <el-form-item label="家庭地址:" prop="YLJGMC" class="itemWidth">
          <el-input v-model="form.YLJGMC" />
        </el-form-item>
        <el-form-item label="家庭人口数:" prop="XB" class="itemWidth">
          <el-input v-model="form.XB" />
        </el-form-item>
        <el-form-item label="联系电话:" prop="DHHM" class="itemWidth">
          <el-input v-model="form.DHHM" />
        </el-form-item>
        <el-form-item label="家庭档案号:" prop="GRDAID" class="itemWidth">
          <el-input v-model="form.GRDAID" />
        </el-form-item>
        <el-form-item label="建档日期:" style="width:48%" prop="recordTime">
          <el-date-picker
            v-model="form.recordTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            @change="dateChangeRecordTime"
          />
        </el-form-item>

        <el-form-item label="家庭详细地址:" style="width:100%" prop="JZDZ">
          <el-input v-model="form.JZDZ" />
        </el-form-item>
        <el-form-item label="厨房排风设置:" prop="type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type" />
            <el-checkbox label="地推活动" name="type" />
            <el-checkbox label="线下主题活动" name="type" />
            <el-checkbox label="单纯品牌曝光" name="type" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
      </span>
    </el-dialog>
  </div> -->
</template>
<script>
import BaseLayout from "@/components/Layout/base.vue"
import Institution from "@/components/Trees/Institution.vue"
import mainButton from "@/components/CommonButtons/MainButton.vue"
import searchMain from "@/components/CommonForm/index.vue"
import CommonTable from "@/components/CommonTable/index.vue"
// import tableInfo from '@/components/Table/table-info.vue'
// import personnelTable from '@/components/Table/personnel-table.vue'
// 加载模拟数据
import {
  infoList,
  testList,
  sexs,
  fileStatusType,
  liveType,
  dataSource,
  helpPoor,
  peopleSigns,
  publicSigns,
  addressList,
  information,
  dataProps,
  searchHandle
} from "@/simdata/healthData.js"

export default {
  name: "Roles",
  components: {
    BaseLayout,
    Institution,
    mainButton,
    searchMain,
    CommonTable
  },
  data() {
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error("请输入合法的手机号"))
    }
    return {
      itemList: [
        {
          label: "贫",
          color: "#BF924C"
        }
      ],
      // 配置常用按钮
      mainButton: [
        {
          label: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "primary",
          handle: () => this.addHandle()
        },
        {
          label: "导出Excel",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击了")
          }
        },
        {
          label: "档案调用",
          icon: "el-icon-postcard",
          type: "warning",
          handle: () => {
            console.log("点击档案了")
          }
        }
      ],
      // 查询表单
      formData: {
        Address_value: [], // 常用地址
        keyword: "", // 个人信息项 字段
        keyValue: "", // 值
        createDate: null, // 建档日期 开始
        endDate: null // 结束日期
      },
      // 验证
      searchRules: {
        Address_value: [
          { required: true, message: "请选择常用地址", trigger: "change" }
        ]
      },
      // label的宽度
      labelWidth: "auto",
      // 配置search label表单
      formItemList: [
        {
          type: "Select",
          label: "个人信息查询项目",
          prop: "keyWord",
          width: "120px",
          span: 8,
          options: information,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Input",
          label: "",
          prop: "keyValue",
          width: "120px",
          span: 8,
          placeholder: ""
        },
        {
          type: "Cascader",
          label: "常用地址",
          prop: "Address_value",
          width: "120px",
          span: 8,
          options: addressList,
          props: dataProps,
          change: () => this.handleChange(),
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "建档日期",
          prop: "createDate",
          width: "140px",
          span: 8,
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "至",
          prop: "endDate",
          width: "140px",
          span: 8,
          placeholder: "请选择..."
        }
      ],

      // 所有列表数据
      infoTitle: "家庭基本信息列表",
      testTitle: "家庭成员列表",
      infoList: infoList,
      testList: testList,
      // 配置显示的label标签
      columns: [
        { prop: "name", label: "户主姓名", width: "100" },
        { prop: "identityNumber", label: "户主姓名", width: "100" },
        { prop: "phonenumber", label: "本人电话", width: "100" },
        { prop: "detailedAddress", label: "门牌号码", width: "100" },
        { prop: "nowAddress", label: "家庭地址", width: "100" },
        { prop: "createDate", label: "建档日期", width: "100" },
        { prop: "number", label: "家庭档案号", width: "100" }
      ],
      // 控制表格操作按钮的显示隐藏
      displayColumn: {
        operationCol: true,
        editBtn: true,
        removeBtn: true
      },
      // test配置label标签
      testColumns: [
        { prop: "name", label: "姓名", width: "100" },
        {
          prop: "sex",
          label: "性别",
          width: "68",
          option: [
            {
              value: 1,
              label: "未知的性别"
            },
            {
              value: 2,
              label: "男"
            },
            {
              value: 3,
              label: "女"
            },
            {
              value: 4,
              label: "全部"
            }
          ]
        },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "relation", label: "与户主关系", width: "100" }
      ],

      testId: 4,

      dialogType: "new" // 新增的控制

      // 弹框的显示隐藏
      // addDialogVisible: false
    }
  },
  created() {},

  methods: {
    // 点击新增按钮
    addHandle() {
      console.log("点击新增了")
    },
    // 切换常用地址
    handleChange() {
      console.log("点击了")
    },
    // 点击搜索按钮
    search(formName) {
      this.$refs.searchMain.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.formData)

          // 调用接口
          this.callbackComponent()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    // 点击重置按钮
    reset(formName) {
      this.$refs.searchMain.$refs[formName].resetFields()
      // console.log(this.formData)
    },
    // 点击搜索后，请求后台接口了
    callbackComponent() {
      console.log("调接口")
    },

    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {
      console.log(checked)
      console.log(records)
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
    },
    // 监听 页码值的改变事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
    },
    // 点击新增档案
    addRoles() {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return
        // 新增
        if (this.dialogType === "new") {
          const formData = {
            ROW_ID: this.testId++,
            XM: this.form.XM,
            ZJHM: this.form.ZJHM,
            YLJGMC: this.form.YLJGMC,
            XB: this.form.XB,
            DHHM: this.form.DHHM,
            GRDAID: this.form.GRDAID,
            recordTime: this.form.recordTime,
            JZDZ: this.form.JZDZ,
            type: this.form.type
          }
          this.HealthTableData.unshift(formData)
        } else {
          // 修改
          this.HealthTableData.some(item => {
            const isFind = item.ROW_ID === this.form.ROW_ID
            if (isFind) {
              // console.log(item)
              Object.assign(item, this.form)
            }
            return isFind
          })
        }
        this.$message.success("操作成功!")
        // // 隐藏添加用户的对话框
        this.addDialogVisible = false
        this.$refs.addFormRef.resetFields()
      })
    },
    handleBtn() {
      this.dialogType = "new"
      this.addDialogVisible = true
    },
    // 点击修改
    handleEdit(data) {
      // console.log(data)
      this.dialogType = data.dialogType
      this.addDialogVisible = true
      this.$nextTick(() => {
        Object.assign(this.form, data.scope.row)
      })
    },
    // 点击删除
    handleRemove(index) {
      // console.log(index)
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.HealthTableData.splice(index, 1)
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    // 建档日期控件
    dateChangeRecordTime(val) {
      console.log(val)
      this.form.recordTime = val
    },
    // 关闭弹出框
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },

    // 获取所有角色的列表
    async getRolesList() {
      const { data: res } = await this.$http.get("roles")
      if (res.meta.status !== 200) {
        return this.$message.error("获取角色列表失败")
      }
      console.log(res)
      this.rolelist = res.data
    },

    // 展示分配权限的对话框
    async showSetRightDialog(role) {
      this.roleId = role.id
      // 获取所有分配权限的数据
      const { data: res } = await this.$http.get("rights/tree")
      if (res.meta.status !== 200) {
        return this.$message.error("获取权限数据失败！")
      }
      // 获取的数据赋值到列表
      this.rightslist = res.data
      // 递归获取三级节点的id
      this.grtLeafKeys(role, this.defKeys)
      this.setRightDialogVisible = true
    },
    // 通过递归，获取角色下的所有三级权限的id，保存到defKeys
    grtLeafKeys(node, arr) {
      // 如果当前 node 节点不包含children属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => {
        this.grtLeafKeys(item, arr)
      })
    },
    // 监听分配权限对话框的关闭事件
    setRightDialogClosed() {
      // this.defKeys = []
    },
    // 点击为角色分配权限
    async allotRight() {
      // const keys = [
      //   ...this.$refs.treeRef.getCheckedKeys(),
      //   ...this.$refs.treeRef.getHalfCheckedKeys()
      // ]
      // const idStr = keys.join(',')
      // const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
      // if (res.meta.status !== 200) {
      //   return this.$message.error('分配权限失败！')
      // }
      // this.$message.success('分配权限成功！')
      // this.getRolesList()
      // this.setRightDialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
// .roles-container {
//   display: flex;
//   height: calc(100vh - 87px);
//   .body_left {
//     width: 210px;
//     margin-right: 15px;
//     background: #fff;
//   }
//   .body_right {
//     flex: 1;
//     .el-card {
//       height: 100%;
//     }
//   }
// }

// ::v-deep .el-dialog__body {
//   padding: 6px 20px 20px !important;
// }
// .info {
//   display: flex;
//   flex: 1;
//   width: 100%;
//   height: 10px;

//   .vxe-pager {
//     margin-top: 15px;
//   }
// }
// .el-dialog {
//   display: flex;
//   flex-direction: column;
//   .itemWidth {
//     width: 50%;
//     display: inline-block;
//   }
// }
</style>
